<template>
  <div>
    <el-container>
      <el-header height="150">
        <div style="width: 100%;height: 20px;margin-top: 0px;margin-bottom:10px;line-height: 20px">
          <div v-if="show == true">
          <span style="margin-left: 900px">
            <a href="/login">登录</a><el-divider direction="vertical"></el-divider>
               <a href="/order">订单</a><el-divider direction="vertical"></el-divider>
          <a href="/shoppingCart">购物车</a><el-divider direction="vertical"></el-divider>
          <a href="javascript:void(0)" @click="logout()">退出</a>
          </span>
          </div>
          <div v-else>
              <span style="margin-left: 900px">
               <a href="/order">订单</a><el-divider direction="vertical"></el-divider>
          <a href="/shoppingCart">购物车</a><el-divider direction="vertical"></el-divider>
          <a href="javascript:void(0)" @click="logout()">退出</a>
                </span>
          </div>
        </div>
        <div style="width: 1200px;height:100px;margin: 0 auto">
          <div style="float: left">
            <a href="/">
              <img src="../assets/imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
            </a>
          </div>
          <!--搜索框开始-->
          <div style="float: right; margin-top: 30px">
            <!--@keydown.native.enter 设置回车键按下事件-->
            <el-input v-model="keywords" @keydown.native.enter="search()" placeholder="请输入搜索内容">
              <!--slot="append"作用是将按钮追加在搜索框的后面-->
              <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <!--搜索框结束-->
        </div>
        <!--蓝色导航菜单开始-->
        <div style="background-color: #82c8ec;height: 60px;">
          <el-menu style="width: 100%"
                   @select="handleSelect"
                   class="el-menu-demo"
                   mode="horizontal"
                   background-color="#82c8ec"
                   text-color="#fff"
                   active-text-color="#fff">
            <el-menu-item style="margin-left:160px;font-size: 20px" v-for="b in brandArr" :index="b.name+''">{{b.name}}</el-menu-item>
          </el-menu>
        </div>
        <!--蓝色导航菜单结束-->
      </el-header>
      <el-main style="width: 1200px;margin: 0 auto">
        <!--轮播图和排行榜开始-->
        <el-row :gutter="20">
          <el-col :span="18">
            <div>
            <el-carousel height="300px">
              <el-carousel-item v-for="item in bannerArr" :key="item.id">
                <img  :src="require('D:/files/'+item.url)" width="100%" height="100%" alt="">
              </el-carousel-item>
            </el-carousel>
            </div>
          </el-col>
          <el-col :span="6">
            <el-card style="height: 300px">
              <h3>
                <i style="font-weight: bold" class="el-icon-trophy">销量最高</i>
              </h3>
              <el-divider></el-divider>
              <el-table :data="topArr" style="width: 100%;text-align: center">
                <!--type="index" 让这一列显示成编号-->
                <el-table-column type="index" label="排名" width="50">
                </el-table-column>
                <el-table-column prop="name"  label="商品名" width="100">
                </el-table-column>
                <el-table-column prop="sales" label="销量" width="50">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
        <!--轮播图和排行榜结束-->
        <!--商品列表开始-->
        <el-row :gutter="20">
          <el-col :span="6" v-for="p in phoneArr" style="margin-top: 20px">
            <el-card style="width: 255px; height: 330px">
              <a :href="'/detail?id='+p.id">
                <img class="p_img" :key="p.id" :src="require('D:/files/'+p.url)" width="100%" alt="">
              </a>
              <div >
                <a style="text-decoration: none; color:#333333" :href="'/detail?id='+p.id">
                  <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.name}}</p>
                </a>
                <div style="color: #666; margin-bottom: 10px">
                  <span>￥{{p.price}}</span>
                  <s style="font-size: 12px">{{p.oldPrice}}</s>
                  <span style="margin-left:60px">销量:{{p.sales}}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!--商品列表结束-->
      </el-main>
      <el-footer>
        <div style="height: 95px;background-image: url('../assets/imgs/wave.png');margin-bottom: -30px"></div>
        <div style="height: 100px;/*background-color: #3f3f3f*/;
            padding: 30px;text-align: center;color: #b1b1b1">
          <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data: function () {
    return {//在这里面定义变量
      brandArr: [],
      bannerArr:[],
      topArr:[],
      phoneArr:[],
      keywords:"",
      user:"",
      show:true,
    }

  },
  mounted() {
    console.log("准备从服务器端加载【导航分类】....")
    let url ='http://localhost:9081/brands/brandList';
    this.axios.get(url).then((response) =>{
      let responseBody = response.data;
      console.log('接收到服务器端响应的结果：');
      console.log(responseBody);
      this.brandArr = responseBody.data;
    })

    console.log("准备从服务器端加载【轮播图】....")
    url ='http://localhost:9081/banners';
    this.axios.get(url).then((response) =>{
      let responseBody = response.data;
      console.log('接收到服务器端响应的结果：');
      console.log(responseBody);
      this.bannerArr = responseBody.data;
    })

    console.log("准备从服务器端加载【排行榜】....")
    url ='http://localhost:9081/phones/list/top';
    this.axios.get(url).then((response) =>{
      let responseBody = response.data;
      console.log('接收到服务器端响应的结果：');
      console.log(responseBody);
      this.topArr = responseBody.data;
    })

    console.log("准备从服务器端加载【商品列表】....")
    url ='http://localhost:9081/phones';
    this.axios.get(url).then((response) =>{
      let responseBody = response.data;
      console.log('接收到服务器端响应的结果：');
      console.log(responseBody);
      this.phoneArr = responseBody.data;
    })

    //发请求获取当前客户端登录的用户对象
    this.axios.post('http://localhost:9081/users/userExit').then((res) =>{
      console.log(res.data.state)
      let show1 = localStorage.getItem("show")
      console.log(show1);
      //如果没有登录得到的是""空字符串
      if(show1==1){
        this.show=false;
      }
    })
  },

  methods:{
    logout(){
      if (confirm("您确认退出登录吗?")){
        let url ='http://localhost:9081/users/logout'
        this.axios.post(url).then(function (res) {
          console.log(res.data.state)
          localStorage.removeItem("show")
          location.href = "/";//回到首页
        })
      }
    },
    handleSelect(index) {//index代表的是分类的id
      console.log("index="+index);
      location.href="/result?name="+index;
    },

    search(){
      //跳转到结果页面
      location.href="/result?keywords="+this.keywords;
    }
  }
}
</script>

<style>

body{
  background-color: white;
}

header a {
  text-decoration: none;
  color: #6c6c6c;
}
a:hover{
  color: red;
}
.el-table .el-table__cell{
  padding: 0;/*去掉排行榜表格中上下的内边距*/
}
.el-table .cell{
  white-space: nowrap;/*让内容在一行中显示,不换行*/
  text-overflow: ellipsis;/*溢出部分用省略号表示*/
}
.p_img:hover {
  position: relative;
  bottom: 5px;
  /*元素的阴影:x偏移值 y偏移值 浓度 范围 颜色*/
  box-shadow: 0 0 10px 5px #333;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>